<!--  -->
<template>
  <div>
    <van-swipe>
      <van-swipe-item v-for="(item,idx) in swiperData" :key="idx">
        <img class="swiper-img needsclick" :src="item.img" @click="toBannerDetail(idx)"/>
      </van-swipe-item>
    </van-swipe>
    <div class="tuijianbar">热门歌单推荐</div>
    <scroll class="scroll needsclick" ref="scroll"
       :pullUp="true" :pullUping="pullup"
      >
      <song-list-item path="/recommend/songlist" v-for="(item,idx) in songlistData" :key="idx" :songlist="item"></song-list-item>
    </scroll>
    <transition name="songlist">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import SongListItem from "components/songListItem"

import Scroll from "base/scroll"

import getBanner from "network/banner.js"
import {songList} from "network/songlist.js";


export default {
  // name:"recommend",
  data () {
    return {
      swiperData: [],
      songlistData: [],
    };
  },

  components: {
    SongListItem,
    Scroll
  },

  computed: {
  },

  methods: {
    toBannerDetail(idx){
      let link = this.swiperData[idx]['link']
      if(link){
        console.log(111111)
        // window.location.href = link 
      }
    },
    pullup(finish){
     console.log("在外面上拉加载更多") 
     finish();
    }
  },
  created(){
     getBanner().then( data=> this.swiperData=data );
     songList().then( data=> this.songlistData = data )
  },
  mounted(){
  }
  
}

</script>
<style scoped>
  .swiper-img {
    width: 100vw;
    height: 200px;
  }
  .tuijianbar {
    text-align: center;
    color: var();
    padding: 12px;
  }

  .scroll {
    height: 320px;
    overflow: hidden;
  }


  /* 动画 */
  .songlist-enter{
    transform: translateY(100vh);
    /* opacity: 0.3; */
  }

  .songlist-enter-active{
    transition: all 300ms ease-in;
  }
  .songlist-leave-active{
    transition: all 300ms ease-out;
  }
  
  .songlist-leave-to{
    transform: translateY(100vh);
     /* opacity: 0.3; */
  }
</style>